<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="24">
            <a-form-item label="面料册名称">
              <a-input placeholder="请输入面料册名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="6" :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a-button type="primary" @click="showModal" style="margin-left: 8px">新增面料册</a-button>
            </span>
          </a-col>
          <!--新增面料册弹框-->
          <a-modal
            title="新增面料册"
            v-model:visible="visible"
            @ok="saveBookLet"
          >
            <a-form>
              <a-form-item label="面料册名称">
                <a-input style="width: 300px" v-model="bookletName" placeholder="面料册名称"></a-input>
              </a-form-item>
              <a-form-item label="面料册数量">
                <a-input-number :min="1" style="width: 300px" v-model="residueNum" placeholder="面料册数量"></a-input-number>
              </a-form-item>
              <a-form-item label="面料册售价(元)">
                <a-input-number :min="0.01" style="width: 300px" v-model="price" placeholder="系列单价"
                                suffix="元"></a-input-number>
              </a-form-item>
              <a-form-item label="面料册总成本(元)">
                <a-input-number :min="0.01" style="width: 300px" v-model="allPrice" placeholder="系列单价"
                                suffix="元"></a-input-number>
              </a-form-item>
              <!--              <a-form-item >
                              <a-textarea v-model="remake" placeholder="备注" :rows="4"></a-textarea>
                            </a-form-item>-->
            </a-form>
          </a-modal>
          <!--新增系列弹框结束-->

          <!--编辑面料册的弹窗-->
          <a-modal
            title="编辑面料册"
            v-model:visible="visible2"
            @ok="updateFunc"
          >
            <a-form>
              <a-form-item label="面料册名称">
                <a-input style="width: 300px" v-model="selectbook.bookletName" placeholder="面料册名称"></a-input>
              </a-form-item>
              <a-form-item label="可发放面料册数量">
                <a-input-number :min="1" style="width: 300px" v-model="selectbook.residueNum"
                                placeholder="面料册数量"></a-input-number>
              </a-form-item>
              <a-form-item label="面料册售价(元)">
                <a-input-number :min="0.01" style="width: 300px" v-model="selectbook.price" placeholder="系列单价"
                                suffix="元"></a-input-number>
              </a-form-item>
              <a-form-item label="面料册总成本(元)">
                <a-input-number :min="0.01" style="width: 300px" v-model="selectbook.allPrice" placeholder="系列单价"
                                suffix="元"></a-input-number>
              </a-form-item>
              <!--              <a-form-item >
                              <a-textarea v-model="remake" placeholder="备注" :rows="4"></a-textarea>
                            </a-form-item>-->
            </a-form>
          </a-modal>
          <!--编辑弹框结束-->

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!--table区域-begin-->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="30px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
<!--                    v-if="record.status!='0'"-->
                    <a-menu-item style="display: inline;margin-left: 10px">
                      <a @click="$router.push({path:'/fabricCenter/StartList',query:{booklet:record.id}})">面料册发放管理</a>
                    </a-menu-item>

                    <a-menu-item style="display: inline;margin-left: 10px">
                      <a @click="updatebook(record)">编辑</a>
                    </a-menu-item>

                    <a-menu-item style="display: inline;margin-left: 10px">
                      <a
                        @click="$router.push({path:'/fabricCenter/BookletFabricList',query:{booklet:record.id}})">面料管理</a>
                    </a-menu-item>

                    <a-popconfirm style="margin-left: 16px" title="确定删除吗?"
                                  @confirm="() => delFabricBookletFunc(record.id)">
                    <a v-if="record.issueNum==0" type="primary">删除</a>
                  </a-popconfirm>

          <!--                    <a-menu-item v-if="record.status=='0'" style="display: inline;margin-left: 10px">
                                      <a-popconfirm title="确定发放吗?" @confirm="() => startfaFunc(record.id)">
                                        <a style="color:deepskyblue">开始发放</a>
                                      </a-popconfirm>
                              </a-menu-item>-->

          <!--                    <a-menu-item v-if="record.status=='2'" style="display: inline;margin-left: 10px">
                                      <a-popconfirm title="确定结束吗?" @confirm="() => endfaFunc(record.id)">
                                        <a style="color:deepskyblue">结束发放</a>
                                      </a-popconfirm>
                              </a-menu-item>-->

        </span>
      </a-table>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JDate from '@/components/jeecg/JDate.vue'
import {getAction, postAction} from "../../api/manage";

export default {
  name: 'Booklet',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDate
    // LgyxCreditRateModal
  },
  data() {
    return {
      selectbook: {}, // 需要更新的面料册
      price: '', // 单价
      allPrice: '', // 全部成本
      bookletName: '', // 面料册名称
      residueNum: '', // 剩余数量
      remake: '',// 组备注
      visible: false, // 新增弹框的显示
      visible2: false, // 编辑弹框的显示
      description: '面料订单',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '面料册名称',
          align: "center",
          dataIndex: 'bookletName'
        },
        {
          title: '剩余数量(册)',
          align: "center",
          dataIndex: 'residueNum'
        },
        {
          title: '发放数量(册)',
          align: "center",
          dataIndex: 'issueNum'
        },
        {
          title: '面料册售价(元/册)',
          align: "center",
          dataIndex: 'price'
        },
        {
          title: '面料册总成本(元)',
          align: "center",
          dataIndex: 'allPrice'
        },
        /*{
          title: '发放状态',
          align: "center",
          dataIndex: 'status',
          customRender: function (text) {
            if (text == '0') {
              return '未发放'
            } else if (text == '2') {
              return '发放中'
            } else if (text == '3') {
              return '已结束'
            }
          }
        },*/
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed:"right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/fabricCenter/listBooklets',
        saveBooklet: '/fabricCenter/saveBooklet', // 新增面料册
        updateBooklet: '/fabricCenter/updateBooklet', // 更新面料册信息
        startfa: '/fabricCenter/startfa', // 面料册发放
        // 面料册结束发放
        endfa: '/fabricCenter/endfa',
        // 删除未发放面料册
        delFabricBooklet: '/fabricCenter/delFabricBooklet',
      },
      dictOptions: {},
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {

    /**
     * 删除未发放面料册
     */
    delFabricBookletFunc(id) {
      getAction(this.url.delFabricBooklet, {'id': id}).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.loadData()
        } else {
          this.$message.error('操作失败')
        }
      })
    },

    /**
     * 结束发放
     */
    endfaFunc(id) {
      getAction(this.url.endfa, {'id': id}).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },

    /**
     * 开始发放
     */
    startfaFunc(id) {
      getAction(this.url.startfa, {'id': id}).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },

    /**
     * 更新面料的方法
     */
    updateFunc() {
      postAction(this.url.updateBooklet,
        this.selectbook
      ).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.visible2 = false
          this.loadData()
        }
      })
    },

    /**
     * 编辑面料册(打开弹窗)
     */
    updatebook(record) {
      this.visible2 = true
      this.selectbook = record
    },

    /**
     * 新增面料册
     */
    saveBookLet() {
      getAction(this.url.saveBooklet, {
        'bookletName': this.bookletName,
        'price': this.price, // 单价
        'allPrice': this.allPrice, // 全部成本
        'residueNum': this.residueNum, // 剩余数量
      }).then(res => {
        if (res.code == 200) {
          this.visible = false;
          this.$message.success('操作成功')
          this.loadData()
        }
      })
    },


    showModal() { // 新增面料组弹框现实
      this.visible = true;
    },

    /* cleatDate() { // 添加组之后清楚数据
       this.groupID = ''
       this.groupName = ''
       this.GroupPrice = ''
       this.remake = ''
     },*/
    initDictConfig() {
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.fabricName {
  margin-left: 10px;
  margin-top: 10px;
  width: auto;
  display: block !important;
  background: #2d2d2d;
  color: #ffe56d;
  text-align: center;
  border-radius: 3px;
}

.fabigtitle {
  height: 34px;
  width: 200px;
  text-align: left;
}

.fabigcontent {
  height: 34px;
  width: 200px;
  text-align: right;
}

.fatitle {
  height: 34px;
  width: 82px;
  background: rgb(242 242 242);
  text-align: center;
}

.facontent {
  width: 180px;
  overflow: hidden;
  text-align: center;
}
</style>